<template>

  <page-header-wrapper>

    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="操作">
                <a-button type="primary" @click="showCreateModel">
                  添加社区
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table :columns="columns" :data-source="data" :pagination="false" bordered :expandRowByClick="true">
          <span slot="action" slot-scope="text,record">
              <a-button type="link" @click="showUpdateModel(record)">修改</a-button>
          </span>
          <span slot="pos" slot-scope="text,record">
            {{ record.province }}/{{ record.city }}/{{record.district}}
          </span>
          <div slot="expandedRowRender" slot-scope="record, index, indent, expanded">
            <a-row style="margin-bottom: 10px">
              <a-col>
                <a-button type="primary" size="small" @click="preToAddTower(record)">
                  新增楼
                </a-button>
              </a-col>
            </a-row>
            <a-table :columns="towerName" :data-source="record.towers" :pagination="false">
                <span slot="action" slot-scope="text1,record1">
                  <a-row>
                    <a-col span="6">
                      <a-button type="primary" size="small" @click="preToUpdateTower(record1)">修改</a-button>
                    </a-col>
                    <a-col span="6">
                      <a-button type="primary" size="small" @click="toDeleteTower(record1)">删除</a-button>
                    </a-col>
                  </a-row>
                </span>
            </a-table>
          </div>
        </a-table>
      </a-card>
    </div>

    <a-modal v-model="addTower.showAddTowerModel" :confirm-loading="addTower.loading" @ok="toAddTower">
      <a-form layout="horizontal">
        <a-form-item label="楼名">
          <a-input v-model="addTower.info.name"></a-input>
        </a-form-item>
        <a-form-item label="单元数">
          <a-input v-model="addTower.info.unit" type="number"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model="updateTower.showUpdateTowerModel" :confirm-loading="updateTower.loading" @ok="toUpdateTower">
      <a-form layout="horizontal">
        <a-form-item label="楼名">
          <a-input v-model="updateTower.info.name"></a-input>
        </a-form-item>
        <a-form-item label="单元数">
          <a-input v-model="updateTower.info.unit" type="number"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model="createCommunity.state" :confirm-loading="createCommunity.loading" @ok="toCreateCommunity">
      <a-form layout="horizontal">
        <a-form-item label="社区名">
          <a-input v-model="createCommunity.info.name"></a-input>
        </a-form-item>
        <a-form-item label="省/市/区">
          <a-cascader :field-names="{ label: 'label', value: 'label',children:'children' }" :options="options"
                      placeholder="省/市/区" @change="onChangePos"/>
        </a-form-item>
        <a-form-item label="社区位置">
          <a-input v-model="createCommunity.info.address"></a-input>
        </a-form-item>
        <a-form-item label="一键呼救电话号">
          <a-input v-model="createCommunity.info.mobile"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model="updateCommunity.state" :confirm-loading="updateCommunity.loading" @ok="toUpdateCommunity">
      <a-form layout="horizontal">
        <a-form-item label="社区名">
          <a-input v-model="updateCommunity.info.name"></a-input>
        </a-form-item>
        <a-form-item label="省/市/区">
          <a-cascader :default-value="[updateCommunity.info.province, updateCommunity.info.city, updateCommunity.info.district]" :field-names="{ label: 'label', value: 'label',children:'children' }" :options="options"
                      placeholder="省/市/区" @change="onChangeUpdatePos"/>
        </a-form-item>
        <a-form-item label="社区位置">
          <a-input v-model="updateCommunity.info.address"></a-input>
        </a-form-item>
        <a-form-item label="一键呼救电话号">
          <a-input v-model="updateCommunity.info.mobile"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>

</template>

<script>
import {getWallet} from "../../api/wallet";
import pos from '@/json/pos'
import {addCommunity, getCommunity, updateCommunity} from "@/api/community";
import {addTower, deleteTower, updateTower} from "@/api/tower";

const columns = [
  {
    dataIndex: 'id',
    title: '社区ID',
    key: 'id'
  },
  {
    dataIndex: 'name',
    title: '社区名',
  },
  {
    title: '省/市/区',
    scopedSlots: {customRender: 'pos'},
  },
  {
    dataIndex: 'address',
    title: '位置',
  },
  {
    title: '操作',
    scopedSlots: {customRender: 'action'},
  },
]

const towerName=[
  {
    dataIndex: 'id',
    title: 'ID',
    key: 'id'
  },
  {
    dataIndex: 'name',
    title: '楼名',
  },
  {
    dataIndex: 'unit',
    title: '单元数',
  },
  {
    title: "操作",
    scopedSlots: {customRender: 'action'},
  }
]

const createCommunityInfoTemplate = {
  name: '',
  address: '',
  province: '',
  city: '',
  district: '',
  mobile:''
}

export default {
  name: "wallet",
  data() {
    return {
      towerName,
      search: {
        phone: ''
      },
      options: pos,
      columns: columns,
      data: [],
      createCommunity: {
        state: false,
        info: {
          name: '',
          address: '',
          province: '',
          city: '',
          district: '',
          mobile:''
        },
        loading: false
      },
      updateCommunity: {
        state: false,
        info: {
          name: '',
          address: '',
          province: '',
          city: '',
          district: '',
          mobile:''
        },
        loading: false
      },
      addTower:{
        showAddTowerModel:false,
        info: {
          name: '',
          unit: '',
          communityId: '',
        },
        loading: false
      },
      updateTower:{
        showUpdateTowerModel:false,
        info: {
          id:'',
          name: '',
          unit: '',
          communityId: '',
        },
        loading: false
      }
    }
  },
  mounted() {
    this.searchCommunity()
  },
  methods: {
    preToAddTower(e){
      this.addTower.info={
        name: '',
        unit: '',
        communityId: e.id,
      }
      this.addTower.showAddTowerModel=true
    },
    async toAddTower(){
      let _this = this;
      this.addTower.loading = true
      await addTower(_this.addTower.info).then((res) => {
        _this.$notification.success(res)
        _this.addTower.loading = false
        _this.addTower.showAddTowerModel = false
      }).catch((res) => {
        _this.$notification.error(res)
        _this.addTower.loading = false
      })
      this.addTower.loading = false
      this.searchCommunity();
    },
    preToUpdateTower(e){
      this.updateTower.info=JSON.parse(JSON.stringify({
        name: e.name,
        unit: e.unit,
        id: e.id,
      }))
      this.updateTower.showUpdateTowerModel=true
    },
    async toUpdateTower(){
      let _this = this;
      this.updateTower.loading = true
      await updateTower(_this.updateTower.info).then((res) => {
        _this.$notification.success(res)
        _this.updateTower.loading = false
        _this.updateTower.showUpdateTowerModel = false
      }).catch((res) => {
        _this.$notification.error(res)
        _this.updateTower.loading = false
      })
      this.updateTower.loading = false
      this.searchCommunity();
    },
    async toDeleteTower(e){
      let _this = this;
      await deleteTower(e.id).then((res) => {
        _this.$notification.success(res)
      }).catch((res) => {
        _this.$notification.error(res)
      })
      this.searchCommunity();
    },
    onChangePos(e) {
      this.createCommunity.info.province = e[0]
      this.createCommunity.info.city = e[1]
      this.createCommunity.info.district = e[2]
      console.log(e)
    },
    onChangeUpdatePos(e) {
      this.updateCommunity.info.province = e[0]
      this.updateCommunity.info.city = e[1]
      this.updateCommunity.info.district = e[2]
      console.log(e)
    },
    showCreateModel() {
      this.createCommunity.info = JSON.parse(JSON.stringify(createCommunityInfoTemplate));
      this.createCommunity.loading = false
      this.createCommunity.state = true
    },
    showUpdateModel(record){
      this.updateCommunity.info = JSON.parse(JSON.stringify(record));
      this.updateCommunity.loading = false
      this.updateCommunity.state = true
    },
    async toUpdateCommunity(){
      let _this = this;
      this.updateCommunity.loading = true
      await updateCommunity({
        id: this.updateCommunity.info.id,
        name: this.updateCommunity.info.name,
        address: this.updateCommunity.info.address,
        province: this.updateCommunity.info.province,
        city: this.updateCommunity.info.city,
        district: this.updateCommunity.info.district,
        mobile: this.updateCommunity.info.mobile
      }).then((res) => {
        _this.$notification.success(res)
        _this.updateCommunity.loading = false
        _this.updateCommunity.state = false
      }).catch((res) => {
        _this.$notification.error(res)
        _this.updateCommunity.loading = false
      })
      this.updateCommunity.loading = false
      this.searchCommunity();
    },
    async toCreateCommunity() {
      let _this = this;
      this.createCommunity.loading = true
      await addCommunity({
        name: this.createCommunity.info.name,
        address: this.createCommunity.info.address,
        province: this.createCommunity.info.province,
        city: this.createCommunity.info.city,
        district: this.createCommunity.info.district,
        mobile: this.createCommunity.info.mobile
      }).then((res) => {
        _this.$notification.success(res)
        _this.createCommunity.loading = false
        _this.createCommunity.state = false
      }).catch((res) => {
        _this.$notification.error(res)
        _this.createCommunity.loading = false
      })
      this.createCommunity.loading = false
      this.searchCommunity();
    },
    searchCommunity() {
      let _this = this
      getCommunity().then((res) => {
        if (res.status === 200) {
          _this.data = res.data;
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      }).catch(res => {
        _this.$notification.warning({
          message: res.message
        })
      })
    }
  }
}
</script>

<style scoped>

</style>